<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./axios.min.js"></script>
</head>

<body>
    <button id="btn">发送get请求</button>
    <hr>
    <table border="1" width="100%">
        <thead>
            <tr>
                <th>id</th>
                <th>标题</th>
                <th>发布时间</th>
                <th>评论数量</th>
                <th>访问数量</th>
                <th>作者</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="tbody"></tbody>
    </table>
    <script>
        btn.onclick = function () {
            axios({
                url: 'https://cnodejs.org/api/v1/topics',
                method: "GET",
                params: {
                    page: 1, limit: 20
                }
            }).then(function (res) {
                if (res.status === 200) {
                    var html = ''
                    res.data.data.forEach(item => {
                        html += `<tr>
                                <td>${item.id}</td>
                                <td>${item.title}</td>
                                <td>${item.create_at}</td>
                                <td>${item.reply_count}</td>
                                <td>${item.visit_count}</td>
                                <td>${item.author.loginname}</td>
                                <td>
                                    <a target="_blank" href="./detail.html?id=${item.id}">查看详情</a>
                                </td>
                            </tr>`
                    })
                    tbody.innerHTML = html
                }
            })
        }
    </script>
</body>

</html>